<template>
  <div class="item">
    <div class="item-title">
      <div class="item-title-name">
        <span style="font-family: 'Microsoft YaHei',serif">{{name}}</span>
      </div>
      <div class="item-title-end-button">
        <el-button type="success" icon="el-icon-plus" circle plain @click="addTextarea"></el-button>
      </div>
    </div>
    <div class="content" v-for="data in dataArray">
      <div class="content-row">
        <div class="content-text">
          <div>
            <el-input type="textarea" :autosize="{ minRows: 2 }" placeholder="请输入内容"
                      v-model="data.value" @input="handleTextareaInput"></el-input>
          </div>
          <div>
            <span class="interpretation">{{data.source}}</span>
          </div>
        </div>
        <div class="content-row-end-button">
          <el-button type="danger" icon="el-icon-minus" circle plain @click="deleteTextarea(data)"></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TextareaItem",
  props: ['name', 'content', 'source'],
  data() {
    return {
      dataArray: [{
        index: 0,
        value: '',
        source: '（无）'
      }]
    }
  },
  methods: {
    addTextarea() {
      let interpretation = {
        index: this.dataArray[this.dataArray.length - 1].index + 1,
        value: '',
        source: '（无）'
      };
      this.dataArray.push(interpretation);
    },
    deleteTextarea(data) {
      let tempArray = [];
      for (let i = 0; i < this.dataArray.length; i++) {
        if (this.dataArray[i].index !== data.index) {
          tempArray.push(this.dataArray[i]);
        }
      }
      this.dataArray = tempArray;
    },
    handleTextareaInput() {
      this.$emit('input', this.dataArray)
    }
  },
  mounted() {
    if (this.content != null && this.content.length > 0) {
      this.dataArray = this.content;
    } else {
      this.dataArray = [{
        index: 0,
        value: '',
        source: '（无）'
      }]
    }
  }
}
</script>

<style scoped>
.item-title {
  position: relative;
  height: 40px;
}

.item-title-name {
  display: inline-block;
  height: 40px;
  line-height: 40px;
}

.item-title-end-button {
  display: inline-block;
  position: absolute;
  right: 0;
  line-height: 40px;
}

.content {
  margin-bottom: 35px;
}

.content-row {
  position: relative;
  height: 40px;
  margin-bottom: 5px;
}

.content-row-end-button {
  display: inline-block;
  position: absolute;
  right: 0;
  line-height: 40px;
}

.content-text {
  display: inline-block;
  min-width: 300px;
  position: absolute;
  left: 0;
  right: 40px;
}

.interpretation {
  font-family: "Microsoft YaHei", serif;
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  text-align: justify;
  line-height: 22px;
}

.el-button.is-circle {
  padding: 6px;
}
</style>
